<template>
  <div id="app">
  <shop-header></shop-header>
  <bread>
  <span slot='good'>GOODS</span>
  </bread>
<div class="accessory-result-page accessory-page">
  <div class="container">
    <div class="filter-nav">
      <span class="sortby">Sort by:</span>
      <a href="javascript:void(0)" class="default cur">Default</a>
      <a href="javascript:void(0)" @click.prevent='rangePrice' class="price">Price 
        <svg class="icon icon-arrow-short">
          <use xlink:href="#icon-arrow-short"></use></svg>
          </a>
      <a href="javascript:void(0)" @click='showlight' :class="['filterby','stopPop']">Filter by</a>
    </div>
    <div class="accessory-result">
      <!-- filter -->
      <div :class="['filter','stopPop',{'filterby-show':filter_price}]"  id="filter">
        <dl class="filter-price">
          <dt>Price:</dt>
          <dd><a @click='yellow="all";selectPrice(-1)' href="javascript:void(0)" :class="[yellow=='all'?'cur':'']">All</a></dd>
          <dd v-for="(item,i) in shopprice" :key=item.id>
            <a @click='yellow=i;selectPrice(i)' :class="[yellow==i?'cur':'']" href="javascript:void(0)">{{item.pstart}} - {{item.pend}}</a>
          </dd>
        </dl>
      </div>

      <!-- search result accessories list -->
      <div class="accessory-list-wrap">
        <div class="accessory-list col-4">
          <ul>
            <li v-for="item in shopdata" :key="item._id">
              <div class="pic">
                <a href="#"><img v-lazy="'/static/'+item.productImage" alt=""></a>
              </div>
              <div class="main">
                <div class="name">{{ item.productName }}</div>
                <div class="price">{{ item.salePrice }}</div>
                <div class="btn-area">
                  <a @click='addCar(item.productId);' href="javascript:;" class="btn btn--m">加入购物车</a>
                </div>
              </div>
            </li>
          </ul>
          <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
       <img src="../assets/loading-spinning-bubbles.svg" alt="" v-if='more'>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<okalert  @close='closealert' :showalert="showalert" class='showalert'>
  <p slot="error">请先登录，否则无法加入到购物车</p>
  <div slot="shutdown" class='gotocar'>
    <a class='btn btn--m' href="javascript:;" @click.prevent="showalert=showalert;">关闭</a>
  </div>
  
</okalert>


<okalert  :showsuccess="showsuccess" @successclose='successalert' class='showalert'>
  <p slot="success">添加成功啦</p>
  <div slot="gotocar" class='gotocar'>
    <a class='btn btn--m' href="javascript:;" @click="successalert">再买一件</a>
    <router-link to="/cart" class='btn btn--m' @click="successalert">去购物车看看</router-link>
  </div>
  
</okalert>

<div class='md-overlay' v-if='black' @click='showdark'></div>
<!-- <div class='md-overlay' v-if='showalert'></div> -->
   <shop-footer></shop-footer>
   <!-- {{ sonblack }} -->
  </div>
</template>

<script>
import header from './header.vue'
import footer from './footer.vue'
import bread from './bread.vue'
import okalert from './alert.vue'
export default{
  data(){
    return{
           shopdata:[],
           shopprice:[
             {id:1,pstart:0,pend:100},
             {id:2,pstart:100,pend:500},
             {id:3,pstart:500,pend:1000},
             {id:4,pstart:1000,pend:5000}
           ],
           more:true,
           yellow:'all',
           filter_price:false,
           black:false,
           page:1,
           pageSize:8,
           sort:true,
           count:0,
           priceCheck:-1,
           showalert:false,
           showsuccess:false
          
    }
  },
  components:{
    'shop-header':header,
    'shop-footer':footer,
    bread,
    okalert
  },
  created() {
 
  },
  mounted () {
    this.showdata()

  },
  methods: {
    showdata(){
      var params={
        page:this.page,
        pageSize:this.pageSize,
        sort:this.sort?1:-1,
        priceCheck:this.priceCheck
      }
      this.$http.get('/goods',{params:params}).then(data=>{
        this.shopdata=this.shopdata.concat(data.body.result.list)
        this.count=data.body.result.count
      })
    },
    rangePrice(){
      this.shopdata=[]
      this.count=0
      if(this.count==0){
          this.sort=!this.sort
          this.page=1
          this.showdata()
          }   
    },
    selectPrice(index){
       this.shopdata=[]
      this.priceCheck=index
      this.page=1
      this.showdata()
    },
    addCar(productId){
      this.$store.commit('add',productId)
      this.$http.post('/goods/addCar',{productId:productId}).then(data=>{
            if(data.body.status==0){
              // alert('添加成功')
              console.log('添加成功');
              
              this.showsuccess=true
            }else{
              // alert('添加失败')
              this.showalert = true
            }
      })
    },

    
    // showprice(){
    //   this.$http.get('/price').then(data=>{
    //     this.shopprice=data.body.message
    //   })
    // },
    showlight(){
      this.black=true
      this.filter_price=true
    },
    showdark(){
       this.black=false
       this.filter_price=false
    },
    loadMore(){
      if(this.count<8){
        this.more=false
            this.busy = true;
      }else{
          setTimeout(() => {
        this.page ++
        this.showdata()
        this.busy = false;
        this.more=true
      }, 1000);
      }
    
    },
    closealert(){
      this.showalert = !this.showalert
     
    },
    successalert(){
       this.showsuccess = !this.showsuccess
    }
  }
}
</script>

<style>

</style>
